<template>
  <div id="edit-password" v-show="showFlag">
    <div class="mask">
      <transition mode="out-in" name="edit-password">
        <div class="mini" v-show="showFlag">
          <div class="mini-close">
            <el-button
              class="close-btn"
              plain
              size="small"
              icon="el-icon-close"
              circle
              @click="$emit('close')"
            ></el-button>
          </div>
          <div class="header">修改密码</div>
          <div class="password-box">
            <div class="tip">旧密码：</div>
            <el-input
              placeholder="请输入旧密码"
              type="password"
              v-model="oldpass"
              class="password"
            >
            </el-input>
          </div>
          <div class="password-box">
            <div class="tip">新密码：</div>
            <el-input
              placeholder="请输入新密码"
              type="password"
              v-model="newpass"
              class="password"
            >
            </el-input>
          </div>
          <div class="password-box">
            <div class="tip">确认密码：</div>
            <el-input
              placeholder="请再次输入新密码"
              type="password"
              v-model="newpassAgain"
              class="password"
            >
            </el-input>
          </div>
          <el-button
            type="primary"
            style="margin-top: 15px"
            @click="updatePassword"
            >确认修改</el-button
          >
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { updatePass } from "@/api";
export default {
  name: "EditPassword",
  props: ["showFlag"],
  data() {
    return {
      //   旧密码
      oldpass: "",
      //   新密码
      newpass: "",
      // 再次确认密码
      newpassAgain: "",
    };
  },
  methods: {
    //   修改密码
    updatePassword() {
      // 校验完整性
      let { oldpass, newpass, newpassAgain } = this;
      if (
        oldpass.trim() == "" ||
        newpass.trim() == "" ||
        newpassAgain.trim() == ""
      ) {
        this.$message({
          message: "请完成信息填写",
          type: "warning",
          customClass: "el-message-custom",
        });
        return;
      }
      if (newpass != newpassAgain) {
        this.$message({
          message: "两次输入的密码不一致",
          type: "warning",
          customClass: "el-message-custom",
        });
        return;
      }
      //   提交请求
      updatePass(oldpass, newpass).then((result) => {
        if (result.flag) {
          this.$message({
            message: result.msg,
            type: "success",
            customClass: "el-message-custom",
          });
          //   关闭模态框
          this.$emit("close");
        } else {
          this.$message({
            message: result.msg,
            type: "error",
            customClass: "el-message-custom",
          });
          return;
        }
      });
    },
  },
};
</script>

<style lang='less'>
// 动画
.edit-password-enter,
.edit-password-leave-to {
  transform: translateY(100vh);
}
.edit-password-enter-active,
.edit-password-leave-active {
  transition: all 0.5s ease;
}
#edit-password {
  .mask {
    backdrop-filter: blur(30px);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .mini {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 420px;
    border-radius: 8px;
    -webkit-box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    padding: 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 14%;
    position: relative;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    .header {
      font-size: 18px;
      color: #505050;
    }
    .mini-close {
      position: absolute;
      right: 15px;
      top: 15px;
      .close-btn:hover {
        color: var(--themeColor1);
        border: var(--themeColor1) 1px solid;
      }
      i {
        font-weight: bold;
      }
    }
    .password-box {
      display: flex;
      width: 100%;
      white-space: nowrap;
      align-items: center;
      margin-top: 15px;
      .tip {
        width: 100px;
        color: #999;
      }
    }
  }
}
</style>